<template>
  <div>
    <div class="mask" style="opacity: 0.5; display: block; background-color: rgb(0, 0, 0); z-index: 9998; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;"></div>
    <div aria-label="请先同意旅行用户注册协议和隐私政策。点击tab可以切换聚焦，点击esc可以退出注册页" aria-modal="true" tabindex="1" class="base_pop register_pop" id="agr_pop">
      <div class="pop_hd" style="overflow: hidden;">
        <h3 style="float: left;">旅行用户注册协议和隐私政策</h3>
        <router-link to="/hotel" role="button" tabindex="1" aria-label="关闭同意协议弹窗" class="pop_close agree_disable">×</router-link>
      </div>
      <div class="pop_bd" style="overflow:hidden;">
        <div class="clause_wrap">
          <div class="clause_box">
            <p class="sc_con"><b>亲爱的用户，在您注册为旅行用户的过程中，您需要完成我们的注册流程并通过点击同意的形式在线签署以下协议，请您务必仔细阅读、充分理解协议中的条款内容后再点击同意，尤其是加粗字体。</b></p>
            <dl class="register_list">
              <dt><a href="javascript:;">服务协议</a></dt>
              <dd>
                <ul class="register_item">
                  <li>1. 总则 </li>
                  <li>2. 服务简介</li>
                  <li>3. 服务条款的修改 </li>
                  <li>4. 服务变更、中断、终止</li>
                  <li>5. 使用规则 </li>
                  <li>6. 版权声明</li>
                  <li>7. 用户隐私制度 </li>
                  <li>8. 用户的账号、密码和安全性</li>
                  <li>9. 拒绝提供担保 </li>
                  <li>10. 有限责任</li>
                  <li>11. 旅行网络会员服务信息的存储及限制 </li>
                  <li>12. 用户管理</li>
                  <li>13. 用户的违约责任 </li>
                  <li>14. 保障 </li>
                  <li>15. 结束服务</li>
                  <li>16. 通告 </li>
                  <li>17. 参与广告策划</li>
                  <li>18. 邮件内容的所有权 </li>
                  <li>19. 法律</li>
                </ul>
              </dd>
            </dl>
            <dl class="register_list">
              <dt><a href="javascript:;">隐私政策</a></dt>
              <dd>
                <p><b>隐私政策明确了我们产品与/或服务所收集、使用及共享个人信息的类型和方式及用途；明确了用户查询、更正和删除个人信息的方式，</b>具体提纲如下：</p>
                <ul class="register_item">
                  <li>1.隐私政策的确认和接纳 </li>
                  <li>2.信息收集</li>
                  <li>3.信息使用 </li>
                  <li>4.信息共享、转让和披露</li>
                  <li>5.信息保存及跨境传输 </li>
                  <li>6.Cookie的使用</li>
                  <li>7.个人敏感信息提示 </li>
                  <li>8.信息安全与保护</li>
                  <li>9.信息安全事件处置 </li>
                  <li>10.未成年人信息保护</li>
                  <li>11.用户个人信息管理 </li>
                  <li>12.从中国大陆地区以外访问我们的网站</li>
                  <li>13.隐私政策的适用范围 </li>
                  <li>14.隐私政策的修改</li>
                  <li>15.如何联系我们 </li>
                  <li>16.法律</li>
                </ul>
              </dd>
            </dl>
            <p class="sc_con">【审慎阅读】您在申请注册流程中点击同意前，请您务必审慎阅读、充分理解协议中相关条款内容，尤其是与您约定免除或限制责任的条款，以及字体加粗标识的重要条款。</p>
            <p class="sc_con"><b>【请您注意】如果您不同意上述协议或其中任何条款约定，请您停止注册。如果您按照注册流程提示填写信息、阅读并点击同意上述协议且完成全部注册流程后，即表示您已充分阅读、理解并接受协议的全部内容。</b>如果您对以上内容有疑问，请联系：<a href="javascript:;">privacy@ctrip.com</a>。</p>
            <p class="sc_con">点击同意即代表您已阅读并同意旅行《服务协议》和《隐私政策》，并同意我们将您的订单信息共享给为完成此订单所必须的第三方合作方。</p>
          </div>
        </div>
      </div>
      <div class="pop_footer">
        <router-link to="/hotel" role="button" class="reg_btn_disabled agree_disable">不同意</router-link> <a href="javascript:;" role="button" class="reg_btn reg_agree" @click="goRegister">同意并继续</a>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'RegisterPopup',
  methods: {
    goRegister() {
      this.$emit('send-data', 0)
    }
  }
}
</script>

<style lang="scss" scoped>
.base_pop {
  padding: 0 14px;
  margin: 0 auto 10px auto;
  border: 9px solid #dcdcdc;
  background: #fff;
  .pop_hd {
    height: 35px;
    line-height: 35px;
    border-bottom: 1px solid #e1e1e1;
    font-size: 14px;
    color: #333;
    .pop_close {
      float: right;
      width: 18px;
      height: 18px;
      line-height: 16px;
      margin: 9px -4px 0 0;
      font-family: 'Tahoma';
      font-size: 18px;
      color: #ccc;
      font-weight: bold;
      text-align: center;
      z-index: 100;
      *zoom: 1;
    }
  }
}
.base_pop.register_pop {
  position: absolute;
  z-index: 9999;
  top: 50%;
  left: 50%;
  width: 600px;
  height: 480px;
  margin-top: -240px;
  margin-left: -300px;
  padding: 20px 30px;
  border: none;
  .pop_hd {
    height: auto;
    line-height: 1;
    padding-bottom: 10px;
    h3 {
      font-size: 16px;
    }
    .pop_close {
      margin: 0;
    }
  }
  .pop_bd {
    padding: 20px 0 0;
    height: 350px;
    .clause_wrap {
      margin-top: -10px;
      overflow: hidden;
    }
    .clause_box {
      height: 350px;
      padding: 0;
      border: none;
      font-size: 14px;
      color: #333;
      line-height: 24px;
      margin-bottom: 10px;
      overflow-y: scroll;
      .sc_con {
        margin: 5px 0 10px 0;
        line-height: 1.5;
      }
      a {
        text-decoration: underline;
        color: #2577e3;
      }
      .register_list {
        float: left;
        overflow: hidden;
        margin-bottom: 20px;
        dt {
          margin-bottom: 5px;
          font-weight: bold;
        }
        .register_item {
          margin-top: 5px;
          overflow: hidden;
          width: 100%;
          li {
            float: left;
            display: inline-block;
            *display: inline;
            width: 49%;
            overflow: hidden;
          }
        }
      }
    }
  }
  .pop_footer {
    padding: 30px 0;
    text-align: center;
    .reg_btn,
    .reg_btn_disabled {
      width: 160px;
      margin: 0 15px;
      display: inline-block;
      height: 40px;
      line-height: 40px;
      border: 1px solid #ccc;
      font-size: 16px;
      text-align: center;
      border-radius: 4px;
      *filter: chroma(color=#000);
      clear: both;
    }
    .reg_btn {
      color: #fff;
      border-color: #ff9a14;
      background-color: #ff9a14;
    }
    .reg_btn_disabled {
      color: #999;
      background: #fff;
      cursor: pointer;
    }
  }
}
</style>